<template>
    <div class="left content">
        <h3>3DTileset加载</h3>
        <button @click="addTileset">添加对象</button>
        <button @click="flyTo">飞入观察</button>
        <button @click="removeTileset">移除对象</button>
        <hr />
        <h3>属性拾取</h3>
        <button @click="pick">开始监听</button>
        <button @click="destroyPick">销毁监听</button>
        <hr />
        <h3>条件着色</h3>
        <button @click="heightLightBuild">高亮体育馆建筑</button>
        <button @click="maxFloor">楼层大于15的高亮</button>
        <button @click="minShow">高度小于30的隐藏</button>
        <button @click="clear">清除还原</button>
    </div>
</template>

<script setup>
import { Message } from "earthsdk-ui";
import getMyProjectManager from '@/scripts/getMyProjectManager';
import { ES3DTileset, ESUeViewer } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
import { onBeforeUnmount } from 'vue';
const pm = getMyProjectManager();
/**
 * @type {ES3DTileset}
 */
let tileset;

let pickDispose;

const addTileset = () => {
    const sceneObject = pm.createSceneObjectFromClass(ES3DTileset);
    if (!sceneObject) return;
    tileset = sceneObject;
    //192.168.0.115 localhost
    sceneObject.url = 'http://192.168.0.115:9004/tile/model/service/UuBhHuQL/tileset.json';

    sceneObject.d(sceneObject.czmTilesetReadyEvent.donce(() => {
        sceneObject.flyTo();
        Message.success("ES3DTileset 加载完成!");
    }));
}

const flyTo = () => { tileset && tileset.flyTo(); }

/**
 * 销毁对象
 */
const removeTileset = () => {
    tileset && pm.destroySceneObject(tileset);
    tileset = null;
    destroyPick();
}


/**
 * 开始监听拾取
 */
const pick = () => {
    if (!tileset) return;
    destroyPick();
    pickDispose = tileset.pickedEvent.don((e) => {
        console.log('picked', e);
        const flag = pm.activeViewer instanceof ESUeViewer;
        const result = flag ? (e?.childPickedInfo?.uePickResult) : (e?.childPickedInfo?.czmPickResult);
        if (result) {
            let obj = {};
            if (flag) {
                obj = result.features;
            } else {
                const ids = result.getPropertyIds();
                for (let i = 0; i < ids.length; i++) {
                    const id = ids[i];
                    const value = result.getProperty(id);
                    obj[id] = value;
                }
            }
            Message.success("Tile : " + JSON.stringify(obj));
        }

    })
}

/**
 * 销毁监听
 */
const destroyPick = () => {
    pickDispose && pickDispose();
    pickDispose = null;
}

const clear = () => {
    tileset && tileset.resetFeatureStyle();
}

const heightLightBuild = () => {
    //id:"19501"
    if (!tileset) return;
    const json = [{
        "value": "19501",
        "rgba": [1, 0, 0, 1]
    }]
    tileset.setFeatureColor('id', JSON.stringify(json))
}
const maxFloor = () => {
    //Floor:Floor
    if (!tileset) return;
    const json = [{
        "minValue": 15,
        "rgba": [1, 1, 0, 1]
    }]
    tileset.setFeatureColor('Floor', JSON.stringify(json))
}
const minShow = () => {
    //height
    if (!tileset) return;
    const json = [{
        "maxValue": 30,
        "visable": false
    }]
    tileset.setFeatureVisable('height', JSON.stringify(json))
}

onBeforeUnmount(removeTileset);

</script>

<style scoped>
.left {
    width: 100%;
    height: 100%;
    background: url(../../assets/left/kuang.png) no-repeat;
    background-size: 100% 100%;
}

.content {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.content button {
    padding: 10px 50px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>
